<%@ page language="java" pageEncoding="utf-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
	
	<%--
	<c:forEach items="${nebula_model_viewcfg.mainView.sections}" var="section">
		<c:if test="${section.grid != null }">
			<c:set var="nebula_view_main_grid" value="${section.grid}"></c:set>
		</c:if>
		<c:if test="${section.query != null }">
			<c:set var="nebula_view_main_query" value="${section.query}"></c:set>
		</c:if>
	</c:forEach> --%>

	<head>
		<jsp:include page="../common/header.jsp" flush="true"></jsp:include>
		<link rel="stylesheet" type="text/css" href="${resPath}/assets/data-table/bootstrap/dataTables.bootstrap.css">
		
		<c:if test="${nebula_model_viewcfg.hasTreeTable}">
		<link href="${resPath}/assets/treetable/css/jquery.treetable.css" rel="stylesheet" />
		<link href="${resPath}/assets/treetable/css/jquery.treetable.theme.nebula.css" rel="stylesheet" />
		</c:if>
		
		<link href="${resPath}/assets/datepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
		<link href="${resPath}/assets/auto-complete/css/prettify.css" rel="stylesheet" />
		
		
		<link href="${resPath}/assets/jstree/themes/default/style.min.css" rel="stylesheet" />
		<link href="${resPath}/css/default/nebula-default.css" rel="stylesheet" />
	</head>

<body>
<jsp:include page="modal-view.jsp" flush="true"></jsp:include>
<section id="container" class="">
	<jsp:include page="../common/navbar.jsp" flush="true"></jsp:include>
	<!--main content start-->
	<section id="main-content">
		<section class="wrapper">
			<!-- page start-->
			<div class="row">
				<c:forEach items="${nebula_model_viewcfg.mainView.sections}" var="section">
				<div class="${section.clazz}" style="${section.style}">
					<c:if test="${section.query != null}">
					<section class="panel search-panel">
						<header class="panel-heading">
							${section.title}
						</header>
						<div class="panel-body">
							<script type="text/javascript">
							nebula.querys.push({"target":"${section.query.target}","id":"${section.query.id}"});
							</script>
							<form id="${section.query.id}" class="form-horizontal tasi-form" method="post">
							<div class="row">
								<%-- 
								<input type="hidden" name="nebula_pageno" value="${nebula_paging.currentPageNo}">
								 --%>
								<c:forEach items="${section.query.properties}" var="property">
								<c:choose>
								<c:when test="${property.type == 'hidden'}">
									<input <%-- value="${nebula_querymap[property.name]}"--%> type="hidden" name="${property.name}">
								</c:when>
								<c:otherwise>
								<div class="col-lg-4 mgb15">
									<label class="col-sm-3 control-label col-lg-3 pd5">${property.label}：</label>
									<div class="col-lg-9">
										<c:choose>
										<c:when test="${property.type == 'text'}">
										<input placeholder="${property.placeholder}"<%--value="${nebula_querymap[property.name]}" --%> type="text" name="${property.name}" class="form-control">
										</c:when>
										
										<%-- TreeSelect --%>
										<c:when test="${property.type == 'treeselect'}">
										<div class="input-group treeselect">
											<div class="input-group-btn">
												<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
												<div id="${property.tree.id}" class="dropdown-menu"></div>
											</div>
											<input type="text" class="form-control" readonly="readonly">
											<input type="hidden" name="${property.name}" <%--value="${nebula_querymap[property.name]}" --%> >
										</div>
										<script type="text/javascript">
										nebula.trees.push({
											"type":"${property.type}","divid":"${property.tree.id}", "treeId":"${property.tree.treeId}", "parent":"${property.tree.treePid}", "text":"${property.tree.treeName}", "dataset":"${property.tree.dataset}", "opened":"${property.tree.opened}"
										});
										</script>
										</c:when>
										
										<%-- Date Picker --%>
										<c:when test="${property.type =='date' }">
							            <div class="input-group date form-date" data-date="" data-date-format="yyyy-mm-dd" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
							             <input ${nebula_model_data_rules} name="${property.name}" class="form-control" size="16" type="text" value="${property.defaultValue}" readonly>
							             <span class="input-group-addon btn-danger form-date-remove"><span class="glyphicon glyphicon-remove icon-remove"></span></span>
										 <span class="input-group-addon btn-warning"><span class="glyphicon glyphicon-calendar icon-calendar"></span></span>
							            </div>
										</c:when>
										
										<%-- Month Picker --%>
										<c:when test="${property.type =='date-month'}">
							            <div class="input-group date form-date-month" data-date="" data-date-format="yyyy-mm" data-link-field="dtp_input2" data-link-format="yyyy-mm">
							             <input ${nebula_model_data_rules} name="${property.name}" class="form-control" size="16" type="text" value="${property.defaultValue}" readonly>
							             <span class="input-group-addon btn-danger form-date-remove"><span class="glyphicon glyphicon-remove icon-remove"></span></span>
										 <span class="input-group-addon btn-warning"><span class="glyphicon glyphicon-calendar icon-calendar"></span></span>
							            </div>
										</c:when>
										 
									 	<%-- AutoComplete --%>
										<c:when test="${property.type == 'autocomplete'}">
										<script type="text/javascript">
										nebula.completes.push({
											"id":"${property.autoComplete.id}", "name":"${property.autoComplete.name}","dataset":"${property.autoComplete.dataset}"
										});
										</script>
										<input ${nebula_model_data_rules} id="${property.autoComplete.id}" name="${property.name}" type="text" class="form-control"  ${property.disabled} ${property.readonly}>
										</c:when> 
										</c:choose>
									</div>
								</div>
								</c:otherwise>
								</c:choose>
								</c:forEach>
							</div>
							<div class="row">
								<div class="col-lg-12">
									<button type="submit" class="btn btn-danger btn-sm">
										<i class="icon-search"></i>
										查询
									</button>
								</div>
							</div>
							</form>
						</div>
					</section>
					</c:if>
					<c:if test="${section.grid != null}">
					<section class="panel grid-panel">
						<header class="panel-heading">
							${section.title}
						</header>
						<div class="panel-body">
							<%-- Grid --%>
							<div class="adv-table responsive-grid-coltorow">
								<script type="text/javascript">nebula.grids.push({'gridId':'${section.grid.id}','dataset':'${section.grid.dataset}','configPath':'${section.grid.configPath}'});</script>
								<table class="display table table-bordered table-striped" id="${section.grid.id}" width="100%">
								<%--
								<thead>
								<tr>
									<c:forEach items="${section.grid.columns}" var="column">
									<th style="width:${column.width};">${column.label}</th>
									</c:forEach>
								</tr>
								</thead>
								<tbody></tbody> --%>
								</table>
							</div>
							
							<%-- Paging
							<c:if test="${nebula_view_main_grid.page}">
							<div class="row">
								<div class="col-lg-6">
									<div class="dataTables_info" id="editable-sample_info">共 ${nebula_paging.totalCount} 条信息</div>
								</div>
								<div class="col-lg-6">
									<div class="dataTables_paginate paging_bootstrap pagination">
									<ul>
									<li class="prev <c:if test="${nebula_paging.currentPageNo == 1}">disabled</c:if>">
										<a href="javascript:<c:if test="${nebula_paging.currentPageNo != 1}">crud.prevPage()</c:if>;">← 前页</a>
									</li>
									<c:forEach begin="1" end="${nebula_paging.totalPageCount }" var="pageNo">
									<li <c:if test="${nebula_paging.currentPageNo == pageNo }">class="active"</c:if> >
										<a href="javascript:crud.jumpPage(${pageNo})">${pageNo}</a>
									</li>
									</c:forEach>
									<li class="next <c:if test="${nebula_paging.currentPageNo == nebula_paging.totalPageCount}">disabled</c:if>">
										<a href="javascript:<c:if test="${nebula_paging.currentPageNo != nebula_paging.totalPageCount}">crud.nextPage()</c:if>;">后页 → </a>
									</li>
									</ul>
									</div>
								</div>
							</div>
							</c:if> --%>
							<%-- Foot Actions
							<c:forEach items="${nebula_view_main_grid.footActions.buttons}" var="button">
								variable replace
								<c:set var="transAction" value="${button.action}" />
								<c:forEach items="${button.params}" var="btnParam">
									<c:set var="srcParam" value="@{${btnParam.name}}@"/>
									<c:set var="transAction" value="${fn:replace(transAction,srcParam, data[btnParam.value])}" />
								</c:forEach>
								<a href="${transAction}" class="btn ${button.clazz}">
									<c:if test="${!empty button.icon}">
										<i class="${button.icon}"></i>
									</c:if>
									<c:if test="${!empty button.text}">
										${button.text}
									</c:if>
								</a>
							</c:forEach> --%>
						</div>
					</section>
					</c:if>
					<c:if test="${section.tree != null}">
						<section class="panel tree-panel">
						<header class="panel-heading">
							${section.title}
						</header>
						<div class="panel-body">
							<div id="${section.tree.id}"></div>
							<script type="text/javascript" charset="utf-8">
							nebula.trees.push({
								"divid":"${section.tree.id}", "treeId":"${section.tree.treeId}", "parent":"${section.tree.treePid}", "text":"${section.tree.treeName}", "dataset":"${section.tree.dataset}", "opened":"${section.tree.opened}", "action":"${section.tree.action}"
							});
							</script>
						</div>
					</section>
					</c:if>
				</div>
				</c:forEach>
			</div>
			<!-- page end-->
		</section>
	</section>
	<!--main content end-->
	<jsp:include page="../common/footer.jsp" flush="true"></jsp:include>
</section>

	<!-- js placed at the end of the document so the pages load faster -->
	<!--<script src="js/jquery.js"></script>-->
	<script type="text/javascript" src="${resPath}/js/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="${resPath}/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="${resPath}/js/jquery.dcjqaccordion.2.7.js" class="include" ></script>
	<script type="text/javascript" src="${resPath}/js/jquery.scrollTo.min.js"></script>
	<script type="text/javascript" src="${resPath}/js/jquery.validate.min.js"></script>
	<script type="text/javascript" src="${resPath}/js/jquery.autocomplete.js"></script>
	<script type="text/javascript" src="${resPath}/js/jquery.form.js"></script>
	<script type="text/javascript" src="${resPath}/js/respond.min.js" ></script>
	<script type="text/javascript" src="${resPath}/assets/data-table/media/js/jquery.dataTables.js"></script>
	<script type="text/javascript" src="${resPath}/assets/data-table/bootstrap/dataTables.bootstrap.js"></script>
	
	<script type="text/javascript" src="${resPath}/assets/datepicker/js/bootstrap-datetimepicker.js"></script>
	<script type="text/javascript" src="${resPath}/assets/datepicker/js/bootstrap-datetimepicker.zh-CN.js"></script>
	
	<script type="text/javascript" src="${resPath}/assets/auto-complete/js/bootstrap-typeahead.js"></script>
	<script type="text/javascript" src="${resPath}/assets/auto-complete/js/prettify.js"></script>
	
	<c:if test="${nebula_model_viewcfg.hasTreeTable}">
		<script type="text/javascript" src="${resPath}/assets/treetable/jquery.treetable.js"></script>
	</c:if>
	<script type="text/javascript" src="${resPath}/assets/jstree/jstree.min.js"></script>

	<!--system scripts-->
	<script type="text/javascript" src="${resPath}/js/common-scripts.js"></script>
	<script type="text/javascript" src="${resPath}/js/base/common.js"></script>
	<script type="text/javascript" src="${resPath}/js/base/tree-view.js"></script>
	<script type="text/javascript" src="${resPath}/js/base/select-view.js"></script>
	<script type="text/javascript" src="${resPath}/js/base/grid-view.js"></script>
	<script type="text/javascript" src="${resPath}/js/base/view-loader.js"></script>

	
	<script type="text/javascript">
		nebula.catalog = '${nebula_model_catalog}';
		nebula.xmlview = '${nebula_model_xmlview}';
		$(function(){
			ViewLoader.initViews();
		});
	</script>
	
	<c:forEach items="${nebula_model_viewcfg.mainView.scripts}" var="script">
	<script type="text/javascript" src="${resPath}/js/${nebula_model_catalog }/${nebula_model_xmlview}/${script.src}"></script>
	</c:forEach>
</body>
</html>
